<template>
  <div class="swiper">
    <van-swipe class="swiper-list" :autoplay="3000" indicator-color="white">
      <template v-for="(item, index) in swipeData" :key="index">
        <van-swipe-item class="item">
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </template>
      <template #indicator="{ active, total }">
        <div class="indicator">
          <template v-for="(value, key, index) in swipeGroup" :key="key">
            <span class="item" :class="{ active: swipeData[active]?.enumPictureCategory == key }">{{
              getName(value[0].title)
            }}</span>
            <span class="count" v-if="swipeData[active]?.enumPictureCategory == key">
              {{ getCategoryIndex(swipeData[active]) }} / {{ value.length }}
            </span>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
  const props = defineProps({
    swipeData: {
      type: Array,
      default: () => []
    }
  })

  //定义转换数据的方法
  const swipeGroup = {}
  for (const item of props.swipeData) {
    let valueArray = swipeGroup[item.enumPictureCategory]
    if (!valueArray) {
      valueArray = []
      swipeGroup[item.enumPictureCategory] = valueArray
    }
    valueArray.push(item)
  }
  const nameReg = /【(.*?)】/i
  const getName = (name) => {
    const results = nameReg.exec(name)
    return results[1]
  }

  const getCategoryIndex = (item) => {
    const valueArray = swipeGroup[item.enumPictureCategory]
    return valueArray.findIndex((data) => data === item) + 1
  }
</script>

<style lang="less" scoped>
  .swiper {
    .swiper-list {
      .item {
        img {
          width: 100%;
        }
      }
      .indicator {
        position: absolute;
        display: flex;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);

        .item {
          margin: 0 3px;
        }
      }
    }
  }

  &.active {
    padding: 0 3px;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
  }
</style>
